<%--@elvariable id="webRoot" type="com.doupi.partner.op.interceptor.OpFilter"--%>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="../../common/tags.jsp" %>

<!DOCTYPE html>
<html>
<head lang="en">
    <%@include file="../../common/assets.jsp" %>
</head>
<body>
<!-- header -->
<%@include file="../../common/header.jsp" %>

<!-- main start -->
<div class="am-cf admin-main">
    <!-- sidebar start -->
    <%@include file="../../common/menu.jsp" %>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content">

        <div class="am-cf am-padding">
            <div class="am-fl am-cf">
                <strong class="am-text-primary am-text-lg">首页</strong> /
                <small>角色管理</small>
            </div>
        </div>

        <div class="am-g">

            <div class="am-u-sm-12 am-u-md-6 am-text-left">
                <a href="${webRoot}/configure/administratorRole/edit/0" class="am-btn am-btn-default">添加</a>
            </div>
            <div class="am-u-sm-12 am-u-md-6">
                <div class="am-form-group" style="float: right; width: 200px; margin-right: 5px;">
                    <div class="am-input-group am-input-group-sm">
                        <input type="text" class="am-form-field" id="searchKey">
                        <span class="am-input-group-btn">
								<button class="am-btn am-btn-default" type="button"
                                        onclick="searchAdministratorRole();" placeholder="请输入角色名称">搜索</button>
							</span>
                    </div>
                </div>
                <div class="am-form-group" style="float: right; margin-right:10px">
                    <select data-am-selected="{btnSize: 'sm',btnWidth:100}" id="selectStatus">
                        <option value="" selected="selected">全部</option>
                        <option value="0">不可用</option>
                        <option value="1">可用</option>
                    </select>
                </div>
            </div>

            <div class="am-g">
                <div class="am-u-sm-12">
                    <form class="am-form">
                        <table width="100%" class="am-table am-table-striped am-table-bordered am-table-compact am-text-nowrap" id="list_table">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>CODE</th>
                                <th>状态</th>
                                <th>权限</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </form>
                </div>

            </div>
        </div>
    </div>
    <!-- main end -->

    <!-- foot -->
    <%@include file="../../common/footer.jsp" %>

    <script type="text/javascript">
        var ADMINISTRATOR_ROLE_TABLE;
        var permissionClass = ['am-badge am-badge-primary am-round', 'am-badge am-badge-secondary am-round', 'am-badge am-badge-success am-round', 'am-badge am-badge-warning am-round', 'am-badge am-badge-danger am-round', 'am-badge am-badge-success am-round'];
        $(function () {
            //表格初始化
            ADMINISTRATOR_ROLE_TABLE = initDataTable({
                ajax: '${webRoot}/configure/administratorRole/list',
                columns: ['id', 'name', 'code', {
                    data: 'status',
                    render: function (v) {
                        return {
                            "0": "不可用",
                            "1": "可用"
                        }[v];
                    }
                }, {
                    data: 'administratorPermissions',
                    width: '200px',
                    render: function (v) {
                        var html = '';
                        $.each(v, function (key, value) {
                            if (!value) {
                                html += '<span class="' + permissionClass[key % permissionClass.length] + '" style="margin-left:5px;">ROOT根权</span>';
                            } else {
                                html += '<span class="' + permissionClass[key % permissionClass.length] + '" style="margin-left:5px;">' + value.name + '</span>';
                            }
                            if (key != 0 && key % 5 == 0) {
                                html += '<br/>';
                            }
                        });
                        html + '';
                        return html;
                    }
                }, 'createTime', 'updateTime', function (v, flag, data, row) {
                    var html = '<div class="am-btn-group am-btn-group-xs">';

                    html += '<button type="button" onclick="deleteAdministratorRole(\'' + data.id + '\');" class="am-btn am-btn-default am-btn-xs">删除</button>';

                    html += '<a href="${webRoot}/configure/administratorRole/edit/' + data.id + '" class="am-btn am-btn-default am-btn-xs am-text-secondary">编辑</a>';

                    html += '</div>';

                    return html;
                }]
            }, function (data) { //搜索参数JSON数据
                return {
                    name: $('#searchKey').val(),
                    status: $('#selectStatus').val()
                };
            });
        });

        //删除
        function deleteAdministratorRole(code) {
            layer.confirm('确定要删除角色：' + code + '?', {
                title: '删除确认'
            }, function (index) {
                ajaxRequest({
                    url: '${webRoot}/configure/administratorRole/delete/' + code,
                    method: 'DELETE'
                }, function () {
                    searchAdministratorRole();
                });
            });
        }

        //搜索
        function searchAdministratorRole() {
            ADMINISTRATOR_ROLE_TABLE.draw();
        }
    </script>
</body>
</html>